.page{ background-color: rgb(254,240,233);  overflow-x: hidden;width: 100%;}

.page-scroll{
	height: calc(100vh);
	height: calc(100vh - 98rpx - env(safe-area-inset-bottom));
	height: calc(100vh - 98rpx - constant(safe-area-inset-bottom));
}

.rel{position: relative;}
.flex{display: flex;}
.flex-center{align-items: center;}
.flex-between{justify-content: space-between;}
.flex-wrap{flex-wrap: wrap;}
.border-b::after{content: '';position: absolute;bottom: 0;left: 0;height: 1rpx;right: 0;background: #e5e5e5;transform: scaleY(0.5);}
.mb5{margin-bottom: 5px;}
.mt5{margin-top: 5px;}
.mr5{margin-right: 5px;}
.mb2{margin-bottom: 2px;}
.inline{display: inline-block;}

.refresh-header{position:fixed;top:0;left:0;right:0;height:0;background:pink;z-index:1000;transition: all .6s;}
.refresh-header.active{height: 50px;}

.swiper{width: 100%;height: 280rpx;}
.swiper image{width: 100%;height: 100%;}
.swiper .wx-swiper-dots.wx-swiper-dots-horizontal{margin-bottom: -5px;}
.swiper .wx-swiper-dot{width:10rpx;height: 10rpx;display: inline-flex;justify-content:space-between;}
.swiper .wx-swiper-dot::before{content: '';flex:1;border-radius: 50%;background:#ffede1;}
.swiper .wx-swiper-dot-active{width:20rpx;}
.swiper .wx-swiper-dot-active::before{background:#F60;border-radius: 10rpx;} 
.get-point{position: absolute;bottom: 20rpx;left: 20rpx;color: #fff;font-size: 12px;background: rgba(0,0,0,.5);
padding:5px 10px;border-radius: 20px;z-index: 999;}
.get-point.active{animation: myfirst .6s linear;}
.get-point image{width: 20px;height: 20px;margin-right: 5px;border-radius: 50%;}

@keyframes myfirst {
  0%   {transform: translateX(-100%);}
  100% {transform: translateX(0);}
}

.status-bar, .navigation-bar, .navigation, .menu {
  position: fixed;
  z-index: 111111;
}

.status-bar {
  background:linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.3));
}

.navigation-bar {
  background:linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,0));
}


.search-mask{position: fixed;top: 0;left:0;right:0;background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,0));
z-index: 999;padding: 20rpx;box-sizing: border-box;}
.search-mask .back-icon{color: #fff}
.search-mask .address{font-size: 14px;color: #fff;margin-right: 20rpx;max-width: 60px;}
.search-mask .address.show-all{max-width: 54%;}
.search-mask .address text{display:inline-block;width: calc(100% - 17px);overflow: hidden;white-space: nowrap;}
.search-mask .address .img-xiala{width: 12px;height: 5px;margin-left: 5px;margin-top: 5px;}
.search-mask .search{color: rgba(255, 255, 255, 1);background: rgba(255,255,255,.4);font-size: 12px;border-radius: 20px;height: 30px;padding:0 10px;flex-grow: 1;box-sizing: border-box;position: relative;border:1rpx solid rgba(255, 255, 255, .4);overflow:hidden;white-space:nowrap;min-width:32px;}
.search-mask .search .iconfont{font-size: 12px;margin-right: 8px;}
.search-mask .search .icon-yuyin5{font-size: 16px;position: absolute;right: 10rpx;}
.search-mask .icon-btn{margin-left: 30rpx;width: 22px;height: 22px;position: relative;flex-shrink: 0;}
.search-mask .icon-btn::after{content: '';position: absolute;top: -15rpx;left: -15rpx;right: -15rpx;bottom: -15rpx;}
.search-mask .num{position: absolute;top: -1px;right: -8px;width: 15px;height: 15px;background: #fff;border-radius: 50%;
text-align: center;line-height: 15px;font-size: 10px;}
.search-mask.custom{position: static;width: 100%;height: 100%;padding: 0;background:transparent;}
.search-mask.custom .seach-box{height: 100%;width: 100%;}

.more-mask{position: absolute;right: 9px;background: #fff;border-radius: 5px;box-shadow: 1px 1px 5px #aaa;z-index: 999999;}
.more-mask .item image{width: 24px;height: auto;margin-right: 10rpx;vertical-align: middle;}
.more-mask .item{height: 40px;width: 135px;font-size: 14px;padding: 0 10px;display: flex;align-items: center;box-sizing: border-box;}
.more-mask .item.border-b::after{left: calc(20px + 25rpx);right: 20rpx;}
.more-mask .item:last-child::after{height: 0;}
.more-mask .icon-arr-top{position: absolute;right: 0;top: -16px;font-size: 28px;color: #fff;}
.more-mask .icon-arr-top.custom{
	/* #ifdef MP-WEIXIN || MP-ALIPAY */
	left: 7px;
	/* #endif */
}

.header-nav .item{width: 25%;text-align: center;color: #fff;font-size: 14px;padding: 36rpx 0;position: relative;}
.header-nav .item image{width:70rpx;height:70rpx;}


.swiper-type{height: 280rpx;padding-bottom:20rpx;}
.swiper-type .wx-swiper-dots.wx-swiper-dots-horizontal{margin-bottom: 0;bottom: 0;}
.type-list{text-align: center;font-size: 13px;}
.type-list .item{width:20%;float: left;text-align: center;padding-bottom: 20rpx;position:relative;margin-top: 10rpx;}
.type-list image{width: 64rpx;height: 64rpx;}
.type-list .item .icon{position: absolute;top:-10rpx;right: 5rpx;font-size: 10px;color: #fff;background: #ff3e4a;padding: 0 4px;border-radius: 10px 10px 10px 0;border:1rpx solid #fff;}
.type-list .item .desc{white-space: nowrap;}

.news{
	margin: 20rpx;
	font-size: 14px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	position: relative;
	/* #ifdef MP-WEIXIN || MP-ALIPAY */
		margin-top: 16rpx;
	/* #endif */
}
.news image{width: 24px;height: 15px;flex-shrink: 0;}
.news .news-swiper{flex-grow: 1;height: 20px;line-height: 20px;margin-left: 10px;}
.news .icon{color: red;white-space: nowrap;margin-right: 5px;}
.news .desc{display: inline-block;overflow: hidden;text-overflow: ellipsis;width: calc(100% - 40px);white-space: nowrap;}
.news .news-mask{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: transparent;}

.get_coupon .news-swiper{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.get_coupon .btn{margin-left: 6px;background: linear-gradient(#f76b1b, #fe1a3e);color: #fff;border-radius: 11px;padding: 3px 8px;
font-size: 12px;font-weight: 500;letter-spacing: 2px;}

.gap{width: 100%;height: 20rpx;background: #fff1ea;}

.activity-box{display: flex;margin:40rpx 20rpx 0;}
.activity-box .img{width: 23%;height: 55px;margin-right: 2.5%;}
.activity-box .img:last-child{margin-right: 0}
.activity-box .img image{width: 100%;height: 100%;}

.swiper-special{padding:40rpx 20rpx 0;height:195rpx;box-sizing: border-box;}
.swiper-special image{border-radius: 5px;}
.swiper-special.small{padding-top: 20rpx;margin-bottom: 20rpx;}
.swiper-special.small image{border-radius: 8px;}

.title-box{display: flex;margin: 40rpx 20rpx 0;align-items: center;position: relative;font-size: 12px;}
.title-box .title{font-size: 18px;font-weight: 500;margin-right: 5px;vertical-align: top}
.title-box .desc{color:#bbb;align-self: flex-end;}
.title-box .day-box{display: inline-block;}
.title-box .time{font-size: 12px;width: 18px;height: 18px;background: red;color: #fff;display: inline-block;
text-align: center;line-height: 18px;margin: 2px 4px 0;border-radius: 2px;}
.title-box .more{font-size: 12px;color: #999;position: absolute;top: 5px;right: -10rpx}
.title-box .more .iconfont{font-size: 16px;vertical-align: middle;}

.goods-box{margin-left: 20rpx;}
.goods-item{width: calc(33.333% - 20rpx);margin-top: 20rpx;margin-right: 20rpx;overflow: hidden;position: relative;}
.brand-box .goods-item:nth-child(2){margin-right: 0;}
.goods-item:last-child{margin-right: 0;}
.goods-item .img-box{position: relative;}
.goods-item .img-box .icon{position: absolute;bottom: 0;left: 0;background: linear-gradient(to right, #ffb269 , #ff4437);
color: #fff;border-radius: 0 10px 0 0;font-size: 11px;padding: 1px 5px;}
.goods-item image{width: 100%;height: 111.66px;border-radius: 2px;display: block;}
.goods-item .name, .goods-item .desc{font-size: 14px;font-weight: 500;white-space: nowrap;text-overflow: ellipsis;width: 100%;overflow: hidden;margin-top: 2px;}
.goods-item .desc{font-size: 12px;font-weight: 400;}
.goods-item .price-box{color:red;font-size: 12px;margin-top: 2px;height: 18px;overflow: hidden;}
.goods-item .old-price{color: #999;margin-left: 5px;text-decoration: line-through;font-size: 10px;}

.brand-box{margin-left: 20rpx;flex-wrap:wrap;}
.brand-img{width:calc(66.66% - 20rpx);margin-top: 20rpx;margin-right: 20rpx;}
.brand-img image{width: 100%;height: 176.66px;display: block;}

.shop-item{padding: 20rpx;display: flex;position: relative;width: 100%;box-sizing: border-box;}
.shop-item.border-b::after{left: 20rpx;}
.list-wrapper .list-item:last-child .shop-item.border-b:last-child::after{height: 0;}
.shop-item .shop-img{width: 102px;height: 72px;border-radius: 5px;flex-shrink: 0;margin-right: 20rpx;overflow: hidden;position: relative;}
.shop-item .shop-img image{width: 100%;height: 100%;}
.shop-item .info-box{position: relative;width: calc(100% - 102px - 20rpx);min-height: 80px;}
.shop-item .small{color: #333;font-size: 12px;}
.shop-item .small.bg{background: #f4f4f4;margin-right: 5px;margin-bottom: 5px;padding: 0 20rpx;}
.shop-item .name-box{display: flex;justify-content: space-between;position: relative;}
.shop-item .name-box.food{justify-content: flex-start;}
.shop-item .name-box.food .icon{margin-left: 5px;font-size: 12px;border-radius: 3px;align-self: center;color: #fff;height: 20px;line-height: 20px;padding: 0 5px;background:linear-gradient(to right, #facd7a , #faa300);}
.shop-item .name{font-size: 16px;font-weight: 500;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.shop-item .distance{white-space: nowrap}
.shop-item .info-box.group .name{overflow: static;flex-grow: 1;height: 25px;}
.shop-item .info-box.group .name .mr5{max-width: calc(100% - 60px);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;}
.shop-item .info-box.group .name .food-icon{position: relative;top: -4px;margin-left: 0;}
.shop-item .gray{color:#bbb;}
.shop-item .red{color:#f6503e;} 
.shop-item .orange{color: #f17019;font-weight: bold;}
.shop-item .green{color: #06c1ae;border: 1px solid #06c1ae;margin-left: 5px;font-size: 11px;padding: 1px 3px;border-radius: 2px;}
.shop-item .bold{font-weight: bold;}
.shop-item .right{position: absolute;right: 0;}
.shop-item .bottom{position: absolute;bottom: 0;}
.shop-item .desc{margin-bottom:3px;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.shop-item .price-box{line-height: 1;align-items: baseline;}
.shop-item .now-price{margin-right: 5px;font-size: 18px;font-weight: 500;}
.shop-item .discount-icon{display: flex;flex-wrap: wrap;}
.shop-item .discount-icon .icon{margin-right:5px;margin-bottom: 5px;font-size:11px;padding:0 3px;border-radius:2px;color:#ce847f;border:1rpx solid #f4cfcc;background:#fff4f2; }
.shop-item .store-tag{height: 20px;white-space:nowrap;}
.shop-item .store-tag text{display: inline-block;width: 20px;height: 100%;background: pink;font-size: 14px;vertical-align: top;color: #fff;margin-left: 5px;text-align: center;line-height: 20px;}
.shop-item .store-tag text.group-tip{background: #74da1c;}
.shop-item .store-tag text.food-tip{background: #fc5e03;}
.shop-item .store-tag text.appoint-tip{background: #f8c717;}
.shop-item .img-tip{position: absolute;left: 0;bottom: 0;color: #fff;padding: 0 5px;font-size: 12px;
background: linear-gradient(to right, rgb(247, 105, 57) , rgb(255, 60, 0));border-radius: 0 10px 0 5px;}
.shop-item .icon-star{color: #ffc900;font-size:12px;margin-right:5px;}
.shop-item .name-box .food-icon{background:linear-gradient(to right, rgb(243, 137, 101) , rgb(255, 60, 0));color: #fff;
font-size: 12px;height: 20px;line-height: 20px;padding: 0 5px;margin-left: 5px;border-radius: 3px;display: inline-block;}
.shop-item .score{margin-right: 10px;font-size: 12px;}
.shop-item .sale-tip{background: linear-gradient(to right, rgb(247, 105, 57) , rgb(255, 60, 0));color: #fff;font-size: 12px;
margin-right: 5px;padding: 2px 5px;border-radius: 2px;}
.shop-item .news, .shop-item .news .news-swiper{margin: 0;font-size: 12px;}
.loading-tip {text-align: center;line-height: 30px;color: #999;font-size: 14px;margin-top: 20px;}
/* 发票 */
.invoice{color: #06c1ae; border: 1rpx solid #c5f3ef;}
/* 平台首单优惠 平台优惠 */
.system_newuser, .system_minus{color: #aa8023; border: 1rpx solid #f3e5c6;}  
/* 打折 部分商品限时优惠  部分商品分类折扣优惠 配送费优惠 店铺首单优惠 店铺优惠 */
.discount, .isdiscountgoods, .isdiscountsort, .delivery, .newuser, .minus{color: #ff3e4a;border: 1rpx solid #fce5e7;}
.discount-icon>view{margin-right: 5px;margin-bottom: 5px;font-size: 11px;padding: 0 3px;border-radius: 2px;}


/* 切换头部按钮 */
.switch-btn-wrapper{position: fixed;right: 0;bottom: 200px;width: 20px;padding: 20px 0 20px 10px;transition: all .5s;
z-index: 99999;}
.switch-btn-wrapper.active{right: -20px;}
/* .switch-btn-wrapper::after{content:'';position: absolute;top: -10px;left: -25px;bottom: -10px;right: 0;} */
.switch-btn{width: 20px;background:linear-gradient(#06b3a1, #09f1b7);font-size: 12px;color: #fff;text-align: center;
border-radius: 4px 0 0 4px;padding: 5px 0;line-height: 1.3;}
.switch-btn .iconfont{font-size: 11px;}


/* 开门相关样式 */
.openDorBox::before, .openDorBox::after {content: none;}
.openDorBox {background: #06c1ae;width: 150rpx;height: 150rpx;position: fixed;bottom:220rpx;
bottom: calc(220rpx + env(safe-area-inset-bottom));bottom: calc(220rpx + constant(safe-area-inset-bottom));right: 20rpx;background: url(https://hf.pigcms.com/static/wxapp/opendor.png) no-repeat;background-size: 100%;}
.weui-mask {background: rgba(0, 0, 0, 0.6);position: fixed;z-index: 1000;top: 0;right: 0;left: 0;bottom: 0;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;opacity: 1;visibility: visible;}
.weui-dialog__hd {padding: 1.3em 1.6em 0.5em;}
.weui-dialog__title {font-weight: 400;font-size: 18px;}
.weui-dialog__bd {min-height: 40px;font-size: 15px;line-height: 1.3;word-wrap: break-word;word-break: break-all;color: #999;}
.weui-dialog__ft {position: relative;font-size: 18px;display: -webkit-box;display: -webkit-flex;display: flex;}
.weui-dialog__btn {display: block;-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;color: white;text-decoration: none;position: relative;border-radius: 0px;border: none !important;}
.weui-dialog__ft:after {content: " ";position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1px solid #d5d5d6;color: #d5d5d6;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
.weui-dialog .weui-dialog__btn.default {color: #5f646e;}
.weui-dialog__ft:after {content: " ";position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1px solid #d5d5d6;color: #d5d5d6;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
.weui-dialog__ft button:before {border-radius: 0px;}
.weui-dialog__ft button:after {content: none !important;}
.weui-dialog__btn.primary:before {content: " ";position: absolute;left: 0;top: 0;width: 1px;bottom: 0;border-left: 1px solid #d5d5d6;color: #d5d5d6;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleX(0.5);transform: scaleX(0.5);}
.no_border:after {content: none !important;}

/* 关注公众号 */
.official-account {display: block;position: fixed;bottom: 98rpx;right: -100%;width: 100%;z-index: 11;}
.official-account.active{right: 0;}

/* 优惠券 */
.mask{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);height: 0;z-index: 999999;}
.mask.active{height: 100%;}
.mask-content{background: #fff;font-size: 14px;transform: translateY(-100%);transition: all .5s;}
.mask-content.active{transform: translateY(0);}
.coupon-box{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 4;width: 80%;}
.coupon-box .top-img{width: 100%;display: block;height: auto;}
.coupon-box .detail{width: 100%;background: #fc3e2d;box-sizing: border-box;padding-bottom: 15px;border-radius: 0 0 5px 5px;}
.coupon-box .detail image{width: 100%;display: block;height: auto;}
.coupon-box .detail .item{margin:0 auto 10px ;position: relative;width: 90%;}
.coupon-box .detail .item .desc{position: absolute;top: 0;left: 0;display: flex;align-items: center;width: 100%;height: 100%;padding: 10px;box-sizing: border-box;font-size: 16px;color: #333;}
.coupon-box .detail .item .desc .num{flex: 1;}
.coupon-box .detail .item .desc .limit{flex: 2;margin-left: 20px;}
.coupon-box .detail .item .desc .font12{font-size: 12px;color: #666;}
.coupon-box .detail .item .desc .font16{font-size: 18px;}
.coupon-box .detail .item .desc .red{color: #ff3e4a}
.coupon-box .detail .item .desc .num .red{font-weight: bold;}
.coupon-box .detail button{font-size: 16px;color: #410509;background: #ffda31;border-radius:30px;width: 90%;margin: 5px auto 0;}
button::after{border: none;}
.coupon-box .close-icon{text-align: center;color: #fff;margin-top: 20rpx;}
.coupon-box .close-icon .icon-cha{font-size: 60rpx;}

/* 同城信息 */
.city-info{padding-top: 10px;}
.city-info .title{display: flex;justify-content: space-between;align-items: center;padding: 10px;}
.city-info .title .left{font-size: 18px;font-weight: 500;}
.city-info .title .right{color: #999;font-size: 12px;position: relative;right: -5px;}
.city-info .title .right:after{content: '';position: absolute;top: -10px;left: -10px;right: -10px;bottom: -10px;}
.city-info .title .right .iconfont{font-size: 16px;vertical-align: middle;}
.city-info .area{width: 100%;height: 52px;overflow: hidden;}
.city-info .box{height: 100%;overflow-x: auto; overflow-y: hidden;}
.city-info .box::-webkit-scrollbar {width: 0;height: 0;color: transparent;}
.city-info .list{display: flex;}
.city-info .list .item{flex-shrink: 0;font-size: 12px;color: #333;text-align: center;padding: 0 10px;width: 50px;position: relative;}
.city-info .list .item .img-box{width: 32px;height: 32px;margin: 0 auto;margin-bottom: 3px;}
.city-info .list .item .img-box .img{width: 100%;height: 100%;}

/* 超值抢购 两行多列样式 */
.two-grid-coantainer{
	margin: 20rpx 20rpx 0 20rpx;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	/* padding: 10upx 20upx; */
}
.goods-card {
	position: relative;
	/* height: 100px; */
	flex-basis: 48%;
	max-width: 48%;
	margin-bottom: 20upx;
	border: 1rpx solid #F7F7F7;
	border-radius: 10rpx;
	padding-bottom: 10rpx;
	/* background-color: #F7F7F7; */
}

.goods-img-container {
	position: relative;
	width: 100%;
	border-top-left-radius: 10upx;
	border-top-right-radius: 10upx;
	background-color: #F7F7F7;
	/* 设置图片为正方形 */
	height:0;
	padding-top: 100%;
}
.goods-img-container>.goods-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top-left-radius: 10upx;
	border-top-right-radius: 10upx;
}
.text-padding {
	padding-left: 10upx;
	height: 24px;
	line-height: 24px;
	vertical-align: middle;
}

.goods-name .goods-desc {
	max-width: 90%;
}

.text-ellipis {
	/* display: inline-block; */
	white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
}
.goods-desc {
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
	font-size: 10px;
	color: #999999;
}

.price {
	font-size: 18px;
	color: #FB5035;
	margin-right: 20upx;
}

.old-price {
	text-decoration: line-through;
	font-size: 10px;
	color: #999999;
	margin-right: 20upx;
}
